<template>
  <div class="index column">
    <IndexHeader></IndexHeader>
    <div class="user-container row">
      <!-- 左侧导航 -->
      <LeftMenu v-model="menuIndex" :menuContent="menuContent"></LeftMenu>
      <!-- 右侧内容 -->
      <EditUser v-if="menuIndex == 0"></EditUser>
      <MyCompetition v-else-if="menuIndex == 1"></MyCompetition>
      <ChangePwd v-else-if="menuIndex == 2"></ChangePwd>
      <Artical v-else-if="menuIndex == 3"></Artical>
      <Comp v-else-if="menuIndex == 4"></Comp>
      <Pro v-else-if="menuIndex == 5"></Pro>
      <Role v-else-if="menuIndex == 6"></Role>
      <Examine v-else-if="menuIndex == 7"></Examine>
    </div>
    <BottomBar :isFixed="false"></BottomBar>
  </div>
</template>

<script>
import IndexHeader from "@/components/IndexHeader";
import BottomBar from "@/components/BottomBar";
import LeftMenu from "@/components/user/LeftMenu";
import MyCompetition from "@/components/user/myComp";
import ChangePwd from "@/components/user/ChangePwd";
import EditUser from "@/components/user/EditUser";
import Artical from "@/components/user/artical";
import Comp from "@/components/user/comp";
import Pro from "@/components/user/pro";
import Role from "@/components/user/role";
import Examine from "@/components/user/examine";
export default {
  name: "userCenter",
  components: {
    IndexHeader,
    BottomBar,
    LeftMenu,
    MyCompetition,
    ChangePwd,
    EditUser,
    Artical,
    Comp,
    Pro,
    Role,
    Examine
  },
  data() {
    return {
      menuIndex: -2,
      menuContent: [
        { index: 1, icon: "el-icon-trophy", title: "我的竞赛", roles: [1, 4] },
        {
          index: 2,
          icon: "el-icon-key",
          title: "修改密码",
          roles: [1, 2, 3, 4],
        },
        { index: 3, icon: "el-icon-news", title: "文章编辑", roles: [1, 2, 3] },
        { index: 4, icon: "el-icon-reading", title: "竞赛管理", roles: [1, 2] },
        {
          index: 5,
          icon: "el-icon-folder-opened",
          title: "参赛项目管理",
          roles: [1, 3],
        },
        { index: 6, icon: "el-icon-user", title: "用户管理", roles: [1] },
        {
          index: 7,
          icon: "el-icon-document-checked",
          title: "项目审核",
          roles: [1, 2],
        },
      ],
    };
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
  },
  methods: {
    menuChange(index) {
      this.menuIndex = index;
    },
  },
};
</script>

<style scoped>
.index {
  min-height: 100%;
}
.user-container {
  padding: 0 320px;
  min-height: 77.2vh;
  background-color: #fff;
  /* margin-bottom: 50px; */
}
</style>